<template>
    <div  class="nav-box">

        <!-- 动态的添加一个额外的类名：`${classPrefix}-content`：如果classPrefix为真，这个模板字符串会被计算并作为类名的一部分。例如，如果classPrefix的值为myPrefix，
         那么最终的类名将会是myPrefix-content，与content类名一起被应用到div元素上。 -->
        <div class="content" :class="classPrefix && `${classPrefix}-content`">
            <slot></slot>
        </div>
        <Nav></Nav>
    </div>
</template>

<script>
    export default {
        name:'Layout',

        // 传入
        props:['classPrefix']
    }
</script>

<style lang="scss" scoped>
.nav-box{
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .content{
        overflow: auto;
        // 把剩余部分撑满
        flex-grow: 1;
    }
</style>